<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'Estate')}" />
    <title>押品Top10</title>
    <style>
    #bug1 label{
        line-height:34px;
    }
    </style>
</head>
<body>
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>押品Top10</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                %{--<i id="goBack" class="pe-7s-back fa-2x" style="position: absolute; top: 8px;"></i>--}%
                <span>押品Top10</span>
            </h2>
        </div>
    </div>
</div>
<div class="content animate-panel">
    <div class="row">

        <div class="hpanel hblue">
            <div class="panel-heading">
                <div class="panel-tools">
                    <button class="btn btn-primary btn-xs" id="searchData" type="submit"><i class="fa fa-search"></i>查询</button>
                    <button class="btn btn-warning2 btn-xs" type="button" id="resetBtn">
                        <i class="fa fa-times"></i>重置</button>
                </div>
                查询
            </div>

            <div class="panel-body seach-group" id="bug1">
                <div class="row">
                    <div class="form-group col-sm-4">
                        <label for="district" class="col-sm-2 control-label text-center">城市</label>
                        <div class="col-sm-10">
                            <g:select class="form-control" name="city" id="city"
                                      from="${com.cindata.City.executeQuery("select distinct e.city as city from  Estate e where e.city.id <> 1660")}"
                                      valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                      value="${params?.city}"
                                      noSelection="${["-1": '请选择城市']}"/>
                        </div>
                    </div>
                    <div class="form-group col-sm-4">
                        <label for="district" class="col-sm-2 control-label text-center">行政区</label>
                        <div class="col-sm-10 district">
                            <g:select class="form-control" name="district" id="district"
                                      from="${districtList}"
                                      valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                      value="${params?.district}"
                                      noSelection="${["null": '请选择行政区']}"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">
                </div>
                押品数量top10小区
            </div>
            <div class="panel-body">
                <ul id="myTab" class="nav nav-tabs col-md-2" style="z-index: 1">
                    <li id="one" class="active">
                        <a href="" data-toggle="tab"  href="#tab-1" aria-expanded="true">
                            数量
                        </a>
                    </li>
                    <li id="two"><a href="" data-toggle="tab"  href="#tab-1" aria-expanded="true">面积</a></li>
                </ul>
                <div class="form-group col-md-2" style="z-index: 1; padding-top: 4px; display: flex">
                    <label class="control-label" style="line-height: 33px; margin-right: 20px;">TOP</label>
                    <select id="numSelect" class="form-control m-b" name="account">
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                </div>
                <div class="tab-content ">
                    <div id="myChart4" style="width: 100%;height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<asset:javascript src="echarts/echarts-all-3.js" />
<asset:javascript src="main/numberTen.js" />
<script>

    $(function(){
        $("#resetBtn").click(function () {
            $("#s2id_city span:first").html("请选择城市")
            $("#s2id_district span:first").html("请选择行政区")
            $('#city').val("")
            $("#district").val("")
        })
        $("#city").bind("change", function(){
            $("#district option").remove();
            $("#s2id_district span:first").html("请选择行政区");
            var city = $("#city").val()
            $("#district").append("<option value='-1' >请选择行政区</option>")
            if(city=='-1'){
                return
            }
            $.ajax({
                url: "/estate/districtList",
                type: "POST",
                data: {'city': city} ,
                success: function(result){
                    for(var i=0; i < result.districtList.length; i++){
                        $("#district").append("<option value=" + result.districtList[i].zoneNumber + ">" + result.districtList[i].name + "</option>")
                    }
                }
            });
        });
        $("#city").change();
        $('#goBack').click(function(){
            window.history.back(-1);
        })
    })

</script>
</body>
</html>